<template>
	<view>
		<view class="shell">
			<u-navbar title="我的" :title-size="35" :title-bold="true" :immersive="true" :is-back="false"
				:background="background" :border-bottom="false"></u-navbar>
			<view class="information">
				<view class="photo" @click="amendInfo">
					<image :src='UserInfo.f_headimgurl' style="width: 100%; height: 100%;border-radius: 50%;">
					</image>
				</view>
				<view class="information-rg">
					<view style="display: flex; margin-left: 2px;">
						<view class="name">
							{{UserInfo.f_nickName}}
						</view>
						<view style="position: absolute; right: 25px;" @click="changestatue" v-if="identity==2">
							<u-icon name="account" color="#000000" size="28"></u-icon>
							<view style="font-size: 10px;display: contents;">切换商家</view>
						</view>
					</view>
					<button class="mobilebtn" v-if="!telqwe" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">请授权手机号</button>
					<button class="mobile-p" v-if="telqwe" open-type="getPhoneNumber"
							@getphonenumber="getPhoneNumber">手机号：{{telqwe}}</button>
					<!-- <view class="mobile" v-if="telqwe">
						<view class="mobile-p">
							手机号1：{{telqwe}}
						</view>
					</view> -->
				</view>
			</view>
			<view class="center">
				<view class="location">
					<view class="location-p">
						<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/icon/location.png"
							style="width: 36rpx; height: 40rpx; margin-right: 10rpx;"></image>
						{{shop_name?shop_name:'请选择店铺'}}
					</view>
					<view class="store" @click="show = true">
						切换门店<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/icon/cut.png"
							style="width: 24rpx; height: 22rpx; margin-left: 10rpx;">
						</image>
					</view>
				</view>

				<view class="vip" @click="cardbag">
					<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/vip.png " style="width: 690rpx;height: 100rpx;">
					</image>
					<view class="vip-cen">
						<view class="vipcen-lf">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/zhuan.png"
								style="width: 100%; height: 100%;"></image>
						</view>
						<view class="vipcen-c">
							普通会员
						</view>
						<view class="vipcen-d">
							消费可享优惠哦~
						</view>
						<view class="vipcen-rg">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/back-lf.png"
								style="width: 100%; height: 100%;"></image>
						</view>
					</view>
				</view>
				<view class="qwe">
					<view class="coupon" @click="coupon">
						<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/coupon.png"
							style="width: 100%; height: 100%;">
						</image>
					</view>
					<view class="remaining" @click="balance">
						<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/remaining.png"
							style="width: 100%; height: 100%;"></image>
					</view>
				</view>

			</view>
			<view class="modle">
				<view class="modle-title">
					更多服务
				</view>
				<view class="modle-shell">
					<view class="modle-item" @click="platform">
						<view class="item-img">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/icon/youhuiquan.png"
								style="width: 100%; height: 100%;"></image>
						</view>
						<view class="item-title" style="width: 120rpx">
							平台优惠券
						</view>
					</view>
					<view class="modle-item" @click="orderhistory">
						<view class="item-img">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/dingdan.png"
								style="width: 100%; height: 100%;"></image>
						</view>
						<view class="item-title">
							订单记录
						</view>

					</view>
					<view class="modle-item" @click="record">
						<view class="item-img">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/zhanghuchongzhi.png"
								style="width: 100%; height: 100%;"></image>
						</view>
						<view class="item-title">
							充值记录
						</view>
					</view>
					<view class="modle-item" @click="invite">
						<view class="item-img">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/haoyou.png"
								style="width: 100%; height: 100%;"></image>
						</view>
						<view class="item-title">
							邀请好友
						</view>
					</view>
					<view class="modle-item" @click="invite">
						<view class="item-img">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/liebiao.png"
								style="width: 100%; height: 100%;"></image>
						</view>
						<view class="item-title">
							邀请列表
						</view>
					</view>
					<view class="modle-item">
						<button type="default" open-type="contact" plain="true"
							style="height: 170rpx;  background: #ffffff; padding-top: 13px;  border: none; display: flex;  align-items: center;  flex-direction: column;">
							<view class="item-img">
								<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/kefu.png"
									style="width: 100%; height: 100%;"></image>
							</view>
							<view class="item-title">
								联系客服
							</view>
						</button>
					</view>
					<view class="modle-item" @click="invite">
						<view class="item-img">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/women.png"
								style="width: 100%; height: 100%;"></image>
						</view>
						<view class="item-title">
							关于我们
						</view>
					</view>
					<view class="modle-item" @click="selfcheck">
						<view class="item-img">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/yanjuan.png"
								style="width: 100%; height: 100%;"></image>
						</view>
						<view class="item-title">
							自助验券
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-select v-model="show" :list="shopList" @confirm="confirm"></u-select>
		<view style="width: 100%; height: 20px;">
			<u-tabbar v-model="current1" :list="list"></u-tabbar>
		</view>
		<u-popup v-model="showpop" mode="center" border-radius="38" :mask-close-able="true">
			<view class="popbox">
				<view class="poptitle">修改信息</view>
				<view class="pop-cen">
					<button class="headbtn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image :src="avatar" mode="aspectFill" style="width: 100%; height: 100%;"></image>
					</button>
				</view>
				<input v-model="name" type="nickname" class="weui-input" placeholder="请输入昵称" @blur="onNickname" />
				<button class="pop-btn" @click="editInfo">确认修改</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import request from '../../api/http.js'
	import getEqInfoForCode from '../../api/api.js'
	export default {
		props: {
			telqwe: {
				type: Number,
				default: ""
			},
		},
		data() {
			return {
				showpop: false,
				identity: '',
				background: {
					backgroundColor: 'rgba(0,0,0,0)'
				},
				value: '',
				type: 'select',
				show: false,
				shop_name: uni.getStorageSync('shop_name'),
				shop_id: '',
				list: [{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/userhome-grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/userhome.png",
						text: '首页',
						customIcon: false,
						pagePath: '/pages/index/index',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/orderindex_grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/orderindex.png",
						text: '订单',
						customIcon: false,
						pagePath: '/pages/Ewm/Ewm',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermassage-grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermassage.png",
						text: '消息',
						customIcon: false,
						pagePath: '/pages/message/message',
					},
					{
						iconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermain-grey.png",
						selectedIconPath: "https://gongxiangtaiqiu.axa2.com/taiqiu/usermain.png",
						text: '我的',
						isDot: false,
						customIcon: false,
						pagePath: '/pages/main/main',
					},
				],
				current1: 0,
				UserInfo: {},
				shopList: {},
				avatar:'',
				uploadurl: request.BASE_URL,
				name:'',
			};
		},
		created() {
			this.getshoplist()
			this.getUserInfo()
		},
		watch: {
			telqwe(newName, oldName) {
				immediate: true,
				console.log('监听', newName)
				this.telqwe = newName
			}
		},
		methods: {
			editInfo(){
				this.$Api.editInfo({
					user_id: uni.getStorageSync('userid'),
					avatarUrl:this.avatar,
					nickName: this.name
				}).then(res => {
					if(res.data.code==0){
						uni.showToast({
							icon:'success',
							title:'修改成功'
						})
						this.showpop = false
						this.getUserInfo()
					}
				}, err => {})
			},
			// 昵称上传
			onNickname(e) {
				this.name = e.detail.value
				uni.setStorageSync('name', this.name);
				console.log(e, '昵称上传')
			},
			//头像授权
			onChooseAvatar(e) {
				console.log(e.detail.avatarUrl,'toutou')
				let _this = this
				_this.avatar = e.detail.avatarUrl
				console.log(_this.avatar ,'efkhuesgfjeydgfc')
				console.log( _this.uploadurl ,'1111')
				// 头像上传
				uni.uploadFile({
					url: _this.uploadurl + '/upload',
					filePath: _this.avatar,
					name: 'image',
					header: {
						"Authorization": uni.getStorageSync('token')
					},
					success: (res) => {
						let infoObj = JSON.parse(res.data)
						_this.avatar = infoObj.data
						console.log(_this.avatar, '头像')
						uni.setStorageSync('avatar', this.avatar);
					},
					fail: (err) => {
						console.log(err, '失败')
					}
				})
			},
			amendInfo() {
				this.showpop = true
			},
			changestatue() {
				this.$emit('statue', 2)
			},
			getUserInfo() {
				//获取用户信息
				this.$Api.getUserInfo({
					userId: uni.getStorageSync('userid'),
				}).then(res => {
					this.UserInfo = res.data.data
					this.identity = res.data.data.f_is_c
					uni.setStorageSync('identity', this.identity);
					uni.setStorageSync('phoneNumber', res.data.data.f_phone);
					console.log(res.data.data, '成功111')
				}, err => {})
			},
			//获取商家列表
			getshoplist() {
				this.$Api.shopList({
					type: 3,
					page: 1,
					pageNum: 15,
					lon: uni.getStorageSync('longitude'),
					lat: uni.getStorageSync('latitude'),
				}).then(res => {
					// this.shopList = res.data.data
					let arr = res.data.data
					this.shopList = arr.map(item => {
						return {
							label: item.f_shop_name,
							value: item.id
						}
					})
					console.log(this.shopList)

				})
			},
			confirm(e) {
				this.shop_name = e[0].label
				this.shop_id = e[0].value
				uni.setStorageSync('shop_id', this.shop_id);
				uni.setStorageSync('shop_name', this.shop_name);
			},
			getPhoneNumber(e) {
				console.log(e.detail.errMsg) // 判断用户是否允许获取手机号
				console.log(e);
				this.$Api.getUserPhone({
					userId: uni.getStorageSync('userid'),
					edata: e.detail.encryptedData,
					iv: e.detail.iv
				}).then(res => {
					console.log(res.data.data.phoneNumber, '获取手机号')
					uni.setStorageSync('phoneNumber', res.data.data.phoneNumber);
					// this.telqwe = res.data.data.phoneNumber
					this.$emit('changetel',res.data.data.phoneNumber)
				}, err => {})
			},
			// 平台优惠券
			platform() {
				// this.$Api.getEqInfoForCode({
				// 	code: 'W9051'
				// }).then(res => {
				// 	console.log(res)
				// }, err => {})
				uni.navigateTo({
					url: '../../pagesB/noooffers/noooffers'
				})
			},
			cardbag() {
				uni.navigateTo({
					url: '../../pagesB/cardbag/cardbag'
				})
			},
			balance() {
				uni.navigateTo({
					url: '../../pagesB/balance/balance'
				})
			},
			// 充值记录
			record() {
				uni.navigateTo({
					url: '../../pagesB/rechargeRecord/rechargeRecord'
				})
			},
			// 自助验券
			selfcheck() {
				uni.showToast({
					title: '请从首页选择桌台',
					icon: 'none'
				})
				// uni.navigateTo({
				// 	url: '../../pagesB/selfcheck/selfcheck'
				// })
			},
			// 邀请好友
			invite() {
				uni.showToast({
					title: '暂未开放',
					icon: 'none'
				})
				// uni.navigateTo({
				// 	url: '../../pagesB/invite/invite'
				// })
			},
			// 订单记录
			orderhistory() {
				uni.navigateTo({
					url: '../../pagesB/orderhistory/orderhistory'
				})
			},
			coupon() {
				uni.navigateTo({
					url: '../../pagesB/coupon/coupon'
				})
			}
		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(0deg, #F0F3F2 0%, #FFFFFF 100%);
	}

	.headbtn {
		width: 72px;
		height: 72px;
		margin: auto;
		border-radius: 50%;
		padding: 0;
		/* background: #eeeeee; */
		background-image: url('https://gongxiangtaiqiu.axa2.com/taiqiu/loginheader.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20px;
	}

	.weui-input {
		width: 80px;
		height: 20px;
		margin: 15px;
		text-align: center;
		border-bottom: 1px solid #eeeeee;
	}

	.xieyi {
		color: #222222;
		font-weight: 600;
	}

	.popbox {
		width: 313px;
		height: 261px;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.poptitle {
			height: 25px;
			color: #222222;
			font-size: 18px;
			font-weight: 600;
		}

		.pop-cen {
			color: #737373;
			font-size: 14px;
		}

		.pop-btn {
			width: 250px;
			height: 40px;
			background-color: #4EDB9D;
			color: #ffffff;
			border-radius: 25px;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
			font-weight: 600;
			letter-spacing: 2px;
		}

		.pop-nobtn {
			// width: 280px;
			height: 45px;
			border-radius: 25px;
			color: #9d9d9d;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 15px;
			letter-spacing: 2px;
		}
	}

	button[plain] {
		border: 0
	}

	.shell {
		width: 100%;
		height: auto;
		background: linear-gradient(0deg, #F0F3F2 0%, #FFFFFF 100%);

		.information {
			width: 100%;
			height: 200rpx;
			margin-top: 160rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.photo {
				width: 128rpx;
				height: 128rpx;
				border-radius: 50%;

			}

			.information-rg {
				width: 500rpx;
				height: 100rpx;
				margin-left: 20rpx;

				.name {
					width: 250rpx;
					height: 45rpx;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #222222;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.mobilebtn {
					color: #03CC6D;
					height: 20px;
					width: 130px;
					margin-left: 1px;
					border: 1px solid #02FF83;
					margin-top: 10px;
					border-radius: 26px;
					background: #ffffff;
					font-size: 11px;
					display: flex;
					justify-content: center;
					align-items: center;

					.mobile-p {
						// width: 240rpx;
						// height: 21rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #03CC6D;
						background-color: rgba(0,0,0,0) !important;
					}
				}
				.mobile-p {
					color: #03CC6D;
					height: 20px;
					width: 130px;
					margin-left: 1px;
					border: 1px solid #02FF83;
					margin-top: 10px;
					border-radius: 26px;
					background: #ffffff;
					font-size: 11px;
					display: flex;
					justify-content: center;
					align-items: center;
					white-space: nowrap;
					
				}

				.mobile {
					width: 258rpx;
					// height: 40rpx;
					border: 1px solid #02FF83;
					border-radius: 20rpx;
					margin-top: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.mobile-p {
						// width: 240rpx;
						// height: 21rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #03CC6D;
					}
				}

			}
		}

		.modle {
			width: 690rpx;
			height: 432rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0px rgba(223, 223, 223, 0.3);
			border-radius: 16rpx;
			margin: auto;
			padding-top: 20rpx;

			.modle-title {
				// width: 126rpx;
				height: 40rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
				margin-left: 30rpx;
			}

			.modle-shell {
				width: 100%;
				height: 350rpx;
				// margin-top: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;

				.modle-item {
					width: 25%;
					height: 180rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.item-img {
						width: 52rpx;
						height: 52rpx;
					}

					.item-title {
						width: 102rpx;
						height: 23rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #222222;
						margin-top: 18rpx;
					}
				}
			}
		}

		.center {
			width: 690rpx;
			height: 350rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 20rpx 0rpx rgba(223, 223, 223, 0.3);
			border-radius: 16rpx;
			margin: auto;
			margin-bottom: 30rpx;

			.vip {
				width: 690rpx;
				height: 100rpx;
				position: relative;

				.vip-cen {
					width: 600rpx;
					height: 100rpx;
					position: absolute;
					top: 0rpx;
					left: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.vipcen-lf {
						width: 46rpx;
						height: 42rpx;

					}

					.vipcen-c {
						// width: 109rpx;
						// height: 27rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						margin-left: 10rpx;
					}

					.vipcen-d {
						width: 180rpx;
						// height: 23rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						margin-left: 10rpx;
						flex: 1;
					}

					.vipcen-rg {
						width: 47rpx;
						height: 47rpx;
					}



				}
			}

			.qwe {
				width: 690rpx;
				height: 158rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.coupon {
					width: 345rpx;
					height: 158rpx;
				}

				.remaining {
					width: 345rpx;
					height: 158rpx;
				}
			}

			.location {
				width: 100%;
				height: 90rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				// padding-top: 40rpx;
				margin-left: 20rpx;

				.location-p {
					// width: 220rpx;
					// height: 50rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #222222;
					display: flex;

				}

				.store {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #222222;
					width: 160rpx;
				}

			}

		}


	}
</style>